<style>
    .g-container {
        padding: 10px;
        background: #fff;
        box-sizing: border-box;
    }
    .g-container2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .g-input {
        display: flex;
        align-items: center;
        position: relative;
    }
    .g-input text { width: 140upx}
    .g-input input {flex: 1; height: 36upx;}
    
    .textarea {
        width: 100%;
        height: 200upx;
        margin-bottom: 10px;
    }
</style>
<template>
    <view class="page">
        <view class="g-input f-border1px g-container ">
            <text>联系人</text>
            <input type="text" v-model="data.realname">
        </view>
        <view class="g-input f-border1px g-container ">
            <text>联系电话</text>
            <input type="number" v-model="data.mobile">
        </view>
        <view class="g-container2 g-container f-border1px" @tap="showMulLinkageThreePicker">
            <text>所在地区</text>
            <view class="g-container2">
                <text>{{addressText}}</text>
                <view>
                    <arrow color="#ccc" size="40" direction="right"></arrow>
                </view>
            </view>

        </view>
        <textarea class="textarea g-container" v-model="data.address"></textarea>
        <label class="g-container g-container2">
            <text>设为默认</text>
            <switch @change="toggleDefault" :checked="data.is_default" color="#D71611" />
        </label>
        <!-- 地址框 -->
        <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
        <view class="m-loading" v-if="isShowLoading">
            <image src="@/static/images/loading.gif" mode="widthFix"></image>
            <text>加载中</text>
        </view>
    </view>
</template>

<script>
    import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
    import area from '@/components/mpvue-citypicker/city-data/area.js';
    import city from '@/components/mpvue-citypicker/city-data/city.js';
    import province from '@/components/mpvue-citypicker/city-data/province.js';
	import henglang from '@/common/common.js';
	
    export default {
        components: {
            mpvueCityPicker
        },
        data() {
            return {
                themeColor: '#007AFF',
                addressText: '点击选择',
                isShowLoading: false,
                data: { // 提交的数据
                    realname: '',
                    mobile: '',
                    address: '',
                },
				cityPickerValueDefault:[0,0,0]
            };
        },
        methods: {
            // 三级联动选择
            showMulLinkageThreePicker() {
                this.$refs.mpvueCityPicker.show();
            },
            onConfirm(e) {
                let val = e.value;
                this.addressText = e.label.replace(/-/g, ' ');
                this.data.province = province[val[0]].value;
                this.data.city = city[val[0]][val[1]].value;
                this.data.zone = area[val[0]][val[1]][val[2]].value;
            },
            toggleDefault(e) {
                this.data.is_default = e.target.value ? 1 : 0;
            }
        },
        onLoad({id}) {
            let that = this;
			henglang.get('member/address_view',{id:id},true,function(res){
				that.data = res.data.data;
				that.addressText = that.data.province_text +' '+ that.data.city_text +' '+ that.data.zone_text;
				let province_index = 0,city_index = 0,area_index = 0;
				province.forEach(function(item,index){
					if(item.value == that.data.province){
						province_index = index;
						return false;
					}
				});
				city[province_index].forEach(function(item,index){
					if(item.value == that.data.city){
						city_index = index;
						return false;
					}
				});
				area[province_index][city_index].forEach(function(item,index){
					if(item.value == that.data.zone){
						area_index = index;
						return false;
					}
				});
				that.cityPickerValueDefault = [province_index,city_index,area_index];
			});

        },
        onNavigationBarButtonTap(e) {
            let that = this;
            if (e.index == 0) { // 点击保存
                if (!this.data.realname) {
                    henglang.showToast('请输入正确的姓名');
                    return;
                }
                if (!henglang.checkPhone(this.data.mobile)) {
                    henglang.showToast('请输入正确的手机号码');
                    return;
                }
                if (this.data.address == "点击选择") {
                    henglang.showToast('请选择正确的地址');
                    return;
                }
                if (!this.data.address) {
                    henglang.showToast('请选择输入的详细地址');
                    return;
                }
                this.isShowLoading = true;
				henglang.post('member/addressModify',that.data,true,function(res){
					that.isShowLoading = false;
					henglang.showToast(res.data.msg);
				});
            }
            
        }
    }
</script>
